<script setup lang="ts">
<#if pageParams.selectForm.extra.showSelect?? && pageParams.selectForm.extra.showSelect>
import type { VbenFormProps } from '@vben/common-ui';
</#if>
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import { AntDesignOutLined } from '@vben/icons';
import { AccessControl } from '@vben/access';
import { createVNode, ref } from 'vue';

import { message, Modal } from 'ant-design-vue';

import type { RowType } from './${businessPath}.data';

<#if pageParams.form.extra.openFormType?? && pageParams.form.extra.openFormType == "modal">
import { Page, useVbenModal } from '@vben/common-ui';
<#else >
import { Page, useVbenDrawer } from '@vben/common-ui';
</#if>

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ${className}QueryPageListApi, ${className}DelApi, ${className}QueryByIdApi, ${className}DeleteBatchApi } from '#/api/${modulePath}/${businessPath}'
import { SparkDescriptions } from '#/components';
<#if pageParams.selectForm.extra.existTable?? && pageParams.selectForm.extra.existTable>
  <#if pageParams.selectForm.extra.existTreeTable?? && pageParams.selectForm.extra.existTreeTable>
import { querySelectTableApi, querySelectTreeTableApi } from '#/api';
  <#else>
import { querySelectTableApi } from '#/api';
  </#if>
<#elseif pageParams.selectForm.extra.existTreeTable?? && pageParams.selectForm.extra.existTreeTable>
import { querySelectTreeTableApi } from '#/api';
</#if>
<#if pageParams.selectForm.extra.existDict?? && pageParams.selectForm.extra.existDict>
  <#if pageParams.table.extra.dict.exist?? && pageParams.table.extra.dict.exist>
import { queryDictOptionsApi, useDictionaries } from '#/utils';
  <#else >
import { queryDictOptionsApi } from '#/utils';
  </#if>
<#else >
  <#if pageParams.table.extra.dict.exist?? && pageParams.table.extra.dict.exist>
import { useDictionaries } from '#/utils';
  </#if>
</#if>

<#if pageParams.form.extra.openFormType?? && pageParams.form.extra.openFormType == "modal">
import ${ClassName}FormModal from './modules/${ClassName}FormModal.vue';
<#else >
import ${ClassName}FormDrawer from './modules/${ClassName}FormDrawer.vue';
</#if>
import { DetailsColumns } from './${businessPath}.data.ts';

<#if pageParams.table.extra.dict.exist?? && pageParams.table.extra.dict.exist>
const { translateValue } = useDictionaries([<#list pageParams.table.extra.dict.dictCodes as dictCode>'${dictCode}'<#if dictCode_has_next>,</#if></#list>]);
</#if>

const detailsRef = ref();

<#if pageParams.selectForm.extra.showSelect?? && pageParams.selectForm.extra.showSelect>
const formOptions: VbenFormProps = {
  <#if pageParams.selectForm.base??>
    <#if pageParams.selectForm.base.layout??>
  layout: '${pageParams.selectForm.base.layout}',
    </#if>
    <#if pageParams.selectForm.base.wrapperClass??>
  wrapperClass: '${pageParams.selectForm.base.wrapperClass}',
    </#if>
    <#if pageParams.selectForm.base.showCollapseButton??>
  showCollapseButton: ${pageParams.selectForm.base.showCollapseButton?c},
    </#if>
    <#if pageParams.selectForm.base.actionButtonsReverse??>
  actionButtonsReverse: ${pageParams.selectForm.base.actionButtonsReverse?c},
    </#if>
    <#if pageParams.selectForm.base.showDefaultActions??>
  showDefaultActions: ${pageParams.selectForm.base.showDefaultActions?c},
    </#if>
    <#if pageParams.selectForm.base.submitOnChange??>
  submitOnChange: ${pageParams.selectForm.base.submitOnChange?c},
    </#if>
    <#if pageParams.selectForm.base.submitOnEnter??>
  submitOnEnter: ${pageParams.selectForm.base.submitOnEnter?c},
    </#if>
    <#if pageParams.selectForm.base.commonConfig??>
  commonConfig: {
      colon: ${pageParams.selectForm.base.commonConfig.colon?c},
      labelWidth: ${pageParams.selectForm.base.commonConfig.labelWidth},
  },
    </#if>
  </#if>
  <#if pageParams.selectForm.options??>
  schema: [
    <#list pageParams.selectForm.options as option>
      <#if option.extra?? && option.extra.showSelect?? && option.extra.showSelect>
    {
      component: '${option.component}',
      label: '${option.label}',
      fieldName: '${option.fieldName}',
      <#if option.help??>
      help: '${option.help}'
      </#if>
      componentProps: {
        placeholder: '${option.componentProps.placeholder}',
          <#if option.component == "ApiSelect">
        allowClear: true,
        showSearch: true,
            <#if option.extra.fieldRelevanceMode == 1>
        afterFetch: (data) => {
          return data.map((item: any) => ({
            label: item.itemText,
            value: <#if option.extra.fieldPackagePath?contains("Integer")>Number.parseInt(item.itemVal)<#else>item.itemVal</#if>,
          }));
        },
            </#if>
        api: <#if option.extra.fieldRelevanceMode == 1>queryDictOptionsApi,<#else>querySelectTableApi,</#if>
        params: {
            <#if option.extra.fieldRelevanceMode == 1>
          dictCode: '${option.componentProps.params.dictCode}',
            <#else >
          tableName: '${option.componentProps.params.tableName}',
          labelField: '${option.componentProps.params.labelField}',
          valueField: '${option.componentProps.params.valueField}',
          sqlSelect: '${option.componentProps.params.sqlSelect}',
            </#if>
        },
          <#elseif option.component == "ApiTreeSelect">
        api: () =>
          querySelectTreeTableApi({
            tableName: '${option.extra.params.tableName}',
            labelField: '${option.extra.params.labelField}',
            valueField: '${option.extra.params.valueField}',
            sqlSelect: '${option.extra.params.sqlSelect}',
          }),
        labelField: 'name',
        childrenField: 'children',
        valueField: 'id',
          <#elseif option.component == "TimePicker">
        allowClear: true,
        format: 'HH:mm:ss',
        valueFormat: 'HH:mm:ss',
          <#elseif option.component == "DatePicker">
        allowClear: true,
            <#if option.componentProps.showTime?? && option.componentProps.showTime>
        showTime: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
            <#else>
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
            </#if>
          </#if>
      },
    },
      </#if>
    </#list>
  ],
  </#if>
};
</#if>

const gridOptions: VxeTableGridOptions<RowType> = {
  height: 'auto',
  <#if pageParams.table.actionBtn?? && pageParams.table.actionBtn.buttons??>
  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons',
    },
  },
  </#if>
  columns: [
      <#if pageParams.table.extra??>
        <#if pageParams.table.extra.showChoose?? && pageParams.table.extra.showChoose>
      { type: 'checkbox', width: 50, fixed: 'left', align: 'center' },
        </#if>
        <#if pageParams.table.extra.showSerialNumber?? && pageParams.table.extra.showSerialNumber>
      { title: '序号', type: 'seq', width: 50, fixed: 'left', align: 'center' },
        </#if>
      </#if>
      <#if pageParams.table.columns??>
      <#list pageParams.table.columns as column>
      <#if !column.type??>
      {
          <#if column.title??>
        title: '${column.title}',
          </#if>
          <#if column.field??>
            <#if column.showType?? && column.showType == "dictTable">
        field: '${column.field}_dictText',
              <#else >
        field: '${column.field}',
            </#if>
          </#if>
          <#if column.align??>
        align: '${column.align}',
          </#if>
          <#if column.minWidth??>
        minWidth: ${column.minWidth},
          </#if>
          <#if column.visible?? && !column.visible>
        visible: ${column.visible?c},
          </#if>
          <#if column.fixed??>
        fixed: '${column.fixed}',
          </#if>
          <#if column.showType??>
            <#if column.showType == "dict" && column.extra.dictCode??>
        cellRender: {
          name: 'CellDict',
          attrs: {
            dictCode: '${column.extra.dictCode}',
            translateValue,
          },
        },
            <#elseif column.showType == "image">
        cellRender: { name: 'CellImage' },
            <#elseif column.showType == "files">
        cellRender: { name: 'CellFiles' },
            <#elseif column.showType == "link">
        cellRender: { name: 'CellLink' },
            <#elseif column.showType == "html">
        cellRender: { name: 'CellHtml' },
            </#if>
          </#if>
          <#if column.slots??>
        slots: {
          default: '${column.slots.default}',
        },
          </#if>
      },
      </#if>
      </#list>
      </#if>
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await ${className}QueryPageListApi({
          pageNo: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};
<#if pageParams.selectForm.extra.showSelect?? && pageParams.selectForm.extra.showSelect>
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
<#else >
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
</#if>
<#if pageParams.form.extra.openFormType?? && pageParams.form.extra.openFormType == "modal">
const [FromModal, formModalApi] = useVbenModal({
  connectedComponent: ${ClassName}FormModal,
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      gridApi.query();
    }
  },
});
<#else >
const [FormDrawer, formDrawerApi] = useVbenDrawer({
  connectedComponent: ${ClassName}FormDrawer,
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      gridApi.query();
    }
  },
});
</#if>
<#if pageParams.table.actionBtn??>
  <#if pageParams.table.actionBtn.buttons??>
    <#list pageParams.table.actionBtn.buttons as button>
async function ${button.handlerFunName}() {
    <#if button.btnFunctionType?? && button.btnFunctionType == "add">
      <#if pageParams.form.extra.openFormType?? && pageParams.form.extra.openFormType == "modal">
  formModalApi.setData({ id: undefined });
  formModalApi.open();
      <#else>
  formDrawerApi.setData({ id: undefined });
  formDrawerApi.open();
      </#if>
    <#else >
  message.success('${button.handlerFunName}');
    </#if>
}
    </#list>
  </#if>
  <#if pageParams.table.actionBtn.action??>
    <#list pageParams.table.actionBtn.action as button>
async function ${button.handlerFunName}(row) {
    <#if button.btnFunctionType?? && button.btnFunctionType == "edit">
      <#if pageParams.form.extra.openFormType?? && pageParams.form.extra.openFormType == "modal">
  formModalApi.setData({ id: row.id });
  formModalApi.open();
      <#else >
  formDrawerApi.setData({ id: row.id });
  formDrawerApi.open();
      </#if>
    <#elseif button.btnFunctionType?? && button.btnFunctionType == "del">
  const msg = await ${className}DelApi(row.id);
  message.success(msg);
  await gridApi.query();
    </#if>
}
    </#list>
  </#if>
  <#if pageParams.table.actionBtn.tools??>
    <#list pageParams.table.actionBtn.tools as button>
async function ${button.handlerFunName}() {
    <#if button.btnFunctionType?? && button.btnFunctionType == "batchDel">
  const checkboxRecords = gridApi.grid.getCheckboxRecords();
  if (checkboxRecords.length === 0) {
    message.warn('至少选中一行');
  } else {
    const idArray = checkboxRecords.map((record) => record.id);
    const ids = idArray.join(',');
    Modal.confirm({
      title: '系统提示?',
      content: createVNode(
        'div',
        { style: 'color:red;' },
        '确认删除所选中行吗?',
      ),
      onOk() {
          ${className}DeleteBatchApi(ids).then(() => {
          message.success('删除成功');
          gridApi.query();
        });
      },
      class: 'test',
    });
  }
    <#else >
  message.success('${button.handlerFunName}');
    </#if>
}
    </#list>
  </#if>
</#if>
async function handlerDetails(row) {
  detailsRef.value.open({ id: row.id }, DetailsColumns);
}
</script>

<template>
  <Page auto-content-height>
    <#if pageParams.form.extra.openFormType?? && pageParams.form.extra.openFormType == "modal">
    <FromModal class="w-[${pageParams.form.extra.openFormWidth}%]" />
    <#else >
    <FormDrawer class="w-[${pageParams.form.extra.openFormWidth}%]" />
    </#if>
    <SparkDescriptions
      class="w-[60%]"
      title="${functionName}详情"
      ref="detailsRef"
      :api="${className}QueryByIdApi"
    />
    <Grid>
      <#if pageParams.table.actionBtn?? && pageParams.table.actionBtn.buttons??>
        <template #toolbar-buttons>
        <#list pageParams.table.actionBtn.buttons as button>
          <a-button
            <#if button.permSuffix??>
            v-access:code="'${prem}:${button.permSuffix}'"
            </#if>
            type="${button.type}"
            <#if button.class??>
            class="${button.class}"
            </#if>
            <#if button.danger?? && button.danger>
            danger
            </#if>
            <#if button.size??>
            size="${button.size}"
            </#if>
            <#if button.handlerFunName??>
            @click="${button.handlerFunName}()"
            </#if>
          >
            ${button.text}
          </a-button>
        </#list>
        </template>
      </#if>
      <#if pageParams.table.actionBtn?? && pageParams.table.actionBtn.tools??>
        <template #toolbar-tools>
        <#list pageParams.table.actionBtn.tools as button>
          <a-button
            <#if button.permSuffix??>
            v-access:code="'${prem}:${button.permSuffix}'"
            </#if>
            type="${button.type}"
            <#if button.class??>
            class="${button.class}"
            </#if>
            <#if button.danger?? && button.danger>
            danger
            </#if>
            <#if button.size??>
            size="${button.size}"
            </#if>
            <#if button.handlerFunName??>
            @click="${button.handlerFunName}()"
            </#if>
          >
            ${button.text}
          </a-button>
        </#list>
        </template>
      </#if>
      <#if pageParams.table.actionBtn?? && pageParams.table.actionBtn.action??>
         <template #action="{ row }">
           <#list pageParams.table.actionBtn.action as button>
             <#if button.handlerWay?? && button.handlerWay == "pop">
         <a-popconfirm
           cancel-text="再想想"
           title="您确定要删除吗?"
           <#if button.handlerFunName??>
           @confirm="${button.handlerFunName}(row)"
           </#if>
         >
           <a-button
             <#if button.permSuffix??>
             v-access:code="'${prem}:${button.permSuffix}'"
             </#if>
             type="${button.type}"
             <#if button.class??>
             class="${button.class}"
             </#if>
             <#if button.danger?? && button.danger>
             danger
             </#if>
             <#if button.size??>
             size="${button.size}"
             </#if>
             >
               ${button.text}
           </a-button>
         </a-popconfirm>
             <#else >
         <a-button
           <#if button.permSuffix??>
           v-access:code="'${prem}:${button.permSuffix}'"
           </#if>
           type="${button.type}"
           <#if button.class??>
           class="${button.class}"
           </#if>
           <#if button.danger?? && button.danger>
           danger
           </#if>
           <#if button.size??>
           size="${button.size}"
           </#if>
           <#if button.handlerFunName??>
           @click="${button.handlerFunName}(row)"
           </#if>
         >
           ${button.text}
         </a-button>
             </#if>
           </#list>
         <a-dropdown>
           <template #overlay>
             <a-menu>
               <AccessControl :codes="['${prem}:details']" type="code">
                 <a-menu-item key="1" @click="handlerDetails(row)">
                   详情
                 </a-menu-item>
               </AccessControl>
             </a-menu>
           </template>
           <a-button
             v-access:code="'${prem}:more'"
             size="small"
             type="link"
             @click.prevent
           >
             更多
             <AntDesignOutLined />
           </a-button>
         </a-dropdown>
         </template>
      </#if>
    </Grid>
  </Page>
</template>
